<!DOCTYPE html>





<html class="theme-next gemini use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8">
<meta name="generator" content="Hexo 3.9.0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=7.3.0">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=7.3.0">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=7.3.0">
  <link rel="mask-icon" href="/images/apple-touch-icon-next.png?v=7.3.0" color="#222">

<link rel="stylesheet" href="/css/main.css?v=7.3.0">


<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css">


<script id="hexo-configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Gemini',
    version: '7.3.0',
    exturl: false,
    sidebar: {"position":"left","display":"post","offset":12,"onmobile":false},
    back2top: {"enable":true,"sidebar":true,"scrollpercent":true},
    save_scroll: false,
    copycode: {"enable":true,"show_result":true,"style":null},
    fancybox: false,
    mediumzoom: false,
    lazyload: false,
    pangu: false,
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    },
    localsearch: {"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},
    path: 'search.xml',
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    translation: {
      copy_button: 'Copy',
      copy_success: 'Copied',
      copy_failure: 'Copy failed'
    }
  };
</script>

  <meta name="description" content="一直以为 ajax 是一个很神奇的东西，好容易在网上找到视频，下面是我学习的一些学习笔记，希望对大家有所帮助。本文从 http 基础说起，相信大家能看懂的，请耐心喔！">
<meta name="keywords" content="Hexo,HTML,CSS,android,Linux">
<meta property="og:type" content="article">
<meta property="og:title" content="Ajax详细学习笔记">
<meta property="og:url" content="https://dctxf.com/Ajax详细学习笔记.html">
<meta property="og:site_name" content="门口摔倒的老大爷">
<meta property="og:description" content="一直以为 ajax 是一个很神奇的东西，好容易在网上找到视频，下面是我学习的一些学习笔记，希望对大家有所帮助。本文从 http 基础说起，相信大家能看懂的，请耐心喔！">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://dctxf-open.qiniudn.com/kuayu1.png">
<meta property="og:updated_time" content="2017-05-20T03:31:20.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Ajax详细学习笔记">
<meta name="twitter:description" content="一直以为 ajax 是一个很神奇的东西，好容易在网上找到视频，下面是我学习的一些学习笔记，希望对大家有所帮助。本文从 http 基础说起，相信大家能看懂的，请耐心喔！">
<meta name="twitter:image" content="http://dctxf-open.qiniudn.com/kuayu1.png">
  <link rel="alternate" href="/rss.xml" title="门口摔倒的老大爷" type="application/atom+xml">
  <link rel="canonical" href="https://dctxf.com/Ajax详细学习笔记">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome: false,
    isPost: true,
    isPage: false,
    isArchive: false
  };
</script>

  <title>Ajax详细学习笔记 | 门口摔倒的老大爷</title>
  


  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?9ef591dac562902e43858b296afe9979";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>






  <noscript>
  <style>
  .use-motion .motion-element,
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-title { opacity: initial; }

  .use-motion .logo,
  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  <div class="container sidebar-position-left">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta">

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">门口摔倒的老大爷</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
  </div>

  <div class="site-nav-toggle">
    <button aria-label="Toggle navigation bar">
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>


<nav class="site-nav">
  
  <ul id="menu" class="menu">
      
      
      
        
        <li class="menu-item menu-item-home">
      
    
      
    

    <a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i> <br>Home</a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-about">
      
    
      
    

    <a href="/about/" rel="section"><i class="menu-item-icon fa fa-fw fa-user"></i> <br>About</a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-tags">
      
    
      
    

    <a href="/tags/" rel="section"><i class="menu-item-icon fa fa-fw fa-tags"></i> <br>Tags<span class="badge">39</span></a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-categories">
      
    
      
    

    <a href="/categories/" rel="section"><i class="menu-item-icon fa fa-fw fa-th"></i> <br>Categories<span class="badge">5</span></a>

  </li>
      
      
      
        
        <li class="menu-item menu-item-archives">
      
    
      
    

    <a href="/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i> <br>Archives<span class="badge">57</span></a>

  </li>
      <li class="menu-item menu-item-search">
        <a href="javascript:;" class="popup-trigger">
        
          <i class="menu-item-icon fa fa-search fa-fw"></i> <br>Search</a>
      </li>
    
  </ul>

    <div class="site-search">
      
  <div class="popup search-popup local-search-popup">
  <div class="local-search-header clearfix">
    <span class="search-icon">
      <i class="fa fa-search"></i>
    </span>
    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
    <div class="local-search-input-wrapper">
      <input autocomplete="off"
             placeholder="Searching..." spellcheck="false"
             type="text" id="local-search-input">
    </div>
  </div>
  <div id="local-search-result"></div>
</div>


    </div>
</nav>
</div>
    </header>

    


    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
            

          <div id="content" class="content page-post-detail">
            

  <div id="posts" class="posts-expand">
    

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://dctxf.com/Ajax详细学习笔记.html">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="dctxf">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/logo.png">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="门口摔倒的老大爷">
    </span>
      <header class="post-header">

        
          <h2 class="post-title" itemprop="name headline">Ajax详细学习笔记

            
          </h2>
        

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">Posted on</span>

              
                
              

              <time title="Created: 2016-01-11 11:42:32" itemprop="dateCreated datePublished" datetime="2016-01-11T11:42:32+08:00">2016-01-11</time>
            </span>
          
            

            
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">Edited on</span>
                <time title="Modified: 2017-05-20 11:31:20" itemprop="dateModified" datetime="2017-05-20T11:31:20+08:00">2017-05-20</time>
              </span>
            
          

          
            
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="fa fa-comment-o"></i>
      </span>
        
      
      <span class="post-meta-item-text">Disqus: </span>
    
    <a title="disqus" href="/Ajax详细学习笔记.html#comments" itemprop="discussionUrl">
      <span class="post-comments-count disqus-comment-count" data-disqus-identifier="Ajax详细学习笔记.html" itemprop="commentCount"></span>
    </a>
  </span>
  
  
          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <p>一直以为 ajax 是一个很神奇的东西，好容易在网上找到视频，下面是我学习的一些学习笔记，希望对大家有所帮助。本文从 http 基础说起，相信大家能看懂的，请耐心喔！</p>
<a id="more"></a>

<p>[TOC]</p>
<h2 id="HTTP"><a href="#HTTP" class="headerlink" title="HTTP"></a>HTTP</h2><h3 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h3><blockquote>
<p>超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）是互联网上应用最为广泛的一种网络协议。设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法。通过 HTTP 或者 HTTPS 协议请求的资源由统一资源标识符（Uniform Resource Identifiers，URI）来标识。</p>
</blockquote>
<p>HTTP 是一种无状态协议。（不建立持久的链接）</p>
<p><a href="https://zh.wikipedia.org/wiki/%E8%B6%85%E6%96%87%E6%9C%AC%E4%BC%A0%E8%BE%93%E5%8D%8F%E8%AE%AE" target="_blank" rel="noopener">维基百科解释</a></p>
<h3 id="完整-HTTP-请求"><a href="#完整-HTTP-请求" class="headerlink" title="完整 HTTP 请求"></a>完整 HTTP 请求</h3><ol>
<li>建立 TCP 连接</li>
<li>Web 浏览器向 Web 服务器发送请求命令</li>
<li>Web 浏览器发送请求头信息</li>
<li>Web 服务器应答</li>
<li>Web 服务器发送应答头信息</li>
<li>Web 服务器向浏览器发送数据</li>
<li>Web 服务器关闭 TCP 连接</li>
</ol>
<h3 id="HTTP-组成"><a href="#HTTP-组成" class="headerlink" title="HTTP 组成"></a>HTTP 组成</h3><ol>
<li>HTTP 请求的方法或动作，（例：GET 或 POST）</li>
<li>正在请求的 URL</li>
<li>请求头（包含客户端环境信息，身份验证信息等）</li>
<li>请求体，也是请求正文（包含客户提交的查询字符串信息，表单信息等）</li>
</ol>
<h3 id="请求状态"><a href="#请求状态" class="headerlink" title="请求状态"></a>请求状态</h3><p>HTTP 状态码由 3 位数字构成，其中首位数字定义了状态码的类型</p>
<h4 id="1XX"><a href="#1XX" class="headerlink" title="1XX"></a>1XX</h4><p>信息类，表示收到 Web 浏览器请求，正在进一步处理中</p>
<h4 id="2XX"><a href="#2XX" class="headerlink" title="2XX"></a>2XX</h4><p>成功，表示用户请求被正确接收，理解和处理（例：200 OK）</p>
<h4 id="3XX"><a href="#3XX" class="headerlink" title="3XX"></a>3XX</h4><p>重定向，表示请求没有成功，客户必须采取进一步动作</p>
<h4 id="4XX"><a href="#4XX" class="headerlink" title="4XX"></a>4XX</h4><p>客户端错误，表示客户端提交的请求有错误（例：404 NOT Found，意味请求中所引用的文档不存在）</p>
<h4 id="5XX"><a href="#5XX" class="headerlink" title="5XX"></a>5XX</h4><p>服务端错误，表示服务器不能完成对请求对处理（例：500）</p>
<h3 id="HTTP-请求"><a href="#HTTP-请求" class="headerlink" title="HTTP 请求"></a>HTTP 请求</h3><h4 id="GET-请求"><a href="#GET-请求" class="headerlink" title="GET 请求"></a>GET 请求</h4><ul>
<li>一般用于信息获取</li>
<li>使用 URL 传递参数</li>
<li>对发送信息数量有限制，一版在 2000 个字符</li>
</ul>
<h4 id="POST-请求"><a href="#POST-请求" class="headerlink" title="POST 请求"></a>POST 请求</h4><ul>
<li>一般用于修改服务器上资源</li>
<li>对发送信息数量无限制</li>
</ul>
<h3 id="HTTP-响应"><a href="#HTTP-响应" class="headerlink" title="HTTP 响应"></a>HTTP 响应</h3><ol>
<li>一个数字和文字组成的状态码（成功，失败等）</li>
<li>响应头（包含服务器类型，日期时间，内容类型，长度等）</li>
<li>响应体，也是响应正文</li>
</ol>
<h2 id="request-对象"><a href="#request-对象" class="headerlink" title="request 对象"></a>request 对象</h2><h3 id="兼容写法"><a href="#兼容写法" class="headerlink" title="兼容写法"></a>兼容写法</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">var request;</span><br><span class="line">if (window.XMLHttpRequest) &#123;</span><br><span class="line">  request = new XMLHttpRequest();</span><br><span class="line">&#125; else &#123;</span><br><span class="line">  request = new ActiveXObject(&apos;Microsoft.XMLHTTP&apos;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="主要方法"><a href="#主要方法" class="headerlink" title="主要方法"></a>主要方法</h3><h4 id="open-method-url-async"><a href="#open-method-url-async" class="headerlink" title="open(method,url,async)"></a>open(method,url,async)</h4><h4 id="send-string"><a href="#send-string" class="headerlink" title="send(string)"></a>send(string)</h4><h3 id="取得响应"><a href="#取得响应" class="headerlink" title="取得响应"></a>取得响应</h3><h4 id="responseText"><a href="#responseText" class="headerlink" title="responseText"></a>responseText</h4><p>获得字符串形式的响应数据</p>
<h4 id="responseXML"><a href="#responseXML" class="headerlink" title="responseXML"></a>responseXML</h4><p>获得 XML 形式的响应数据</p>
<h4 id="status-和-statusText"><a href="#status-和-statusText" class="headerlink" title="status 和 statusText"></a>status 和 statusText</h4><p>以数字和文本形式返回 HTTP 状态码</p>
<h4 id="getAllResponseHeader"><a href="#getAllResponseHeader" class="headerlink" title="getAllResponseHeader()"></a>getAllResponseHeader()</h4><p>获取所有的响应报头</p>
<h4 id="getResponseHeader"><a href="#getResponseHeader" class="headerlink" title="getResponseHeader()"></a>getResponseHeader()</h4><p>查询响应中的某个字段值</p>
<h4 id="readyState"><a href="#readyState" class="headerlink" title="readyState"></a>readyState</h4><p>会返回 0，1，2，3，4 几个值</p>
<p>0:请求未初始化，open 还没有调用<br>1:服务器连接已建立，open 已经调用<br>2:请求已接收，即接收到头信息了<br>3:请求处理中，即接收到响应主体<br>4:请求已完成，且响应已就绪，即响应完成</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">request.open(&apos;GET&apos;, &apos;get.php&apos;, true);</span><br><span class="line">request.send();</span><br><span class="line">request.onreadystatechange = function() &#123;</span><br><span class="line">  if (request.readyState === 4 &amp;&amp; request.status === 200) &#123;</span><br><span class="line">    //做一些事情 request.responseText</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="JSON"><a href="#JSON" class="headerlink" title="JSON"></a>JSON</h2><h3 id="介绍-1"><a href="#介绍-1" class="headerlink" title="介绍"></a>介绍</h3><p>javascript 对象表示法（javaScript Object Notation）</p>
<p>JSON 是存储和交换文本信息的语法，类似 XML。它采用健值对的方式组织，易于阅读，编写和机器解析，生成</p>
<p>JSON 是独立于语言的，即任何语言都可以解析 JSON，只需要按照 JSON 的规则即可</p>
<h3 id="优点"><a href="#优点" class="headerlink" title="优点"></a>优点</h3><ul>
<li>json 的长度和 xml 相比更小</li>
<li>json 读写速度更快</li>
<li>json 可以使用 javascript 内建的方法直接解析，转换成 javascript 对象方便</li>
</ul>
<h3 id="书写格式（名称-值对）"><a href="#书写格式（名称-值对）" class="headerlink" title="书写格式（名称/值对）"></a>书写格式（名称/值对）</h3><p>名称/值对组合中的名称写在前面（在双引号中），值对写在后面（同样在双引号中），中间用冒号隔开（例：”name”:”dctxf”）</p>
<h3 id="可用类型"><a href="#可用类型" class="headerlink" title="可用类型"></a>可用类型</h3><ul>
<li>数字（整数和浮点数） 例：123 123.123</li>
<li>字符串（在双引号中） 例：”dctxf”</li>
<li>逻辑值（true 或 false） 例：true</li>
<li>数组（在方括号中） 例：[1，2，3，4]</li>
<li>对象（在花括号中） 例：{}</li>
<li>null</li>
</ul>
<h3 id="解析方式"><a href="#解析方式" class="headerlink" title="解析方式"></a>解析方式</h3><ul>
<li><code>eval</code>和<code>JSON.parse</code></li>
<li><strong>在代码中使用 eval 是恨危险的！</strong>特别是用它执行第三方的 JSON 数据（其中可能包含恶意代码）时，尽可能使用<code>JSON.parse()</code>方法解析字符串本身，该方法还可以捕捉 JSON 中的语法错误。</li>
</ul>
<p>JSON 字符串</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">var data = &apos;&#123;&quot;fruit&quot;: [&#123;&quot;name&quot;: &quot;apple&quot;,&quot;number&quot;: 10&#125;, &#123;&quot;name&quot;: &quot;orange&quot;,&quot;number&quot;: 12&#125;]&#125;&apos;;</span><br></pre></td></tr></table></figure>

<h4 id="eval"><a href="#eval" class="headerlink" title="eval"></a>eval</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var oJson = eval(&apos;(&apos; + data + &apos;)&apos;);</span><br><span class="line"></span><br><span class="line">console.log(oJson.fruit[0].name);</span><br><span class="line">//输出 apple</span><br></pre></td></tr></table></figure>

<p>由于<code>eval</code>可以解析以下</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">eval(&apos;alert(1)&apos;);</span><br></pre></td></tr></table></figure>

<p>所以尽量不要使用<code>eval</code></p>
<h4 id="JSON-parse"><a href="#JSON-parse" class="headerlink" title="JSON.parse"></a>JSON.parse</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var oJson = JSON.parse(data);</span><br><span class="line"></span><br><span class="line">console.log(oJson.fruit[0].name);</span><br><span class="line">//输出 apple</span><br></pre></td></tr></table></figure>

<h4 id="拓展阅读"><a href="#拓展阅读" class="headerlink" title="拓展阅读"></a>拓展阅读</h4><p><a href="https://zh.wikipedia.org/wiki/JSON" target="_blank" rel="noopener">拓展阅读</a><br><a href="http://www.json.org/" target="_blank" rel="noopener">json 官网</a></p>
<h2 id="跨域"><a href="#跨域" class="headerlink" title="跨域"></a>跨域</h2><ul>
<li>域名地址组成</li>
</ul>
<p><img src="http://dctxf-open.qiniudn.com/kuayu1.png" alt></p>
<ul>
<li>当<strong>协议、子域名、主域名、端口号中任意一个不想同时</strong>，都算做跨域</li>
<li>不用域之间相互请求资源，就算做<strong>跨域</strong></li>
<li>Javascript 出于安全方面考虑，不允许跨域调用其它页面的对象</li>
</ul>
<h3 id="服务器代理"><a href="#服务器代理" class="headerlink" title="服务器代理"></a>服务器代理</h3><h3 id="JSONP"><a href="#JSONP" class="headerlink" title="JSONP"></a>JSONP</h3><p>只能对<code>GET请求起作用</code></p>
<h3 id="XHR2"><a href="#XHR2" class="headerlink" title="XHR2"></a>XHR2</h3><ul>
<li>html5 提供 XMLHttpRequest Level2 已经实现了跨域访问及其它新功能</li>
<li>IE10 以下版本不支持</li>
</ul>

    </div>

    
    
    
        
      

      <footer class="post-footer">

        

          <div class="post-nav">
            <div class="post-nav-next post-nav-item">
              
                <a href="/window对象的top、parent、opener含义.html" rel="next" title="window对象的top、parent、opener含义">
                  <i class="fa fa-chevron-left"></i> window对象的top、parent、opener含义
                </a>
              
            </div>

            <span class="post-nav-divider"></span>

            <div class="post-nav-prev post-nav-item">
              
                <a href="/Mac下新安装的MySQL无法登陆root用户解决方法.html" rel="prev" title="Mac下新安装的MySQL无法登陆root用户解决方法">
                  Mac下新安装的MySQL无法登陆root用户解决方法 <i class="fa fa-chevron-right"></i>
                </a>
              
            </div>
          </div>
        
      </footer>
    
  </div>
  
  
  
  </article>

  </div>


          </div>
          
    
    
  <div class="comments" id="comments">
    <div id="disqus_thread">
      <noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
    </div>
  </div>
  
  

        </div>
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    <div class="sidebar-inner">
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            Table of Contents
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            Overview
          </li>
        </ul>
      

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-overview">

          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image"
      src="/images/logo.png"
      alt="dctxf">
  <p class="site-author-name" itemprop="name">dctxf</p>
  <div class="site-description motion-element" itemprop="description"></div>
</div>
  <nav class="site-state motion-element">
      <div class="site-state-item site-state-posts">
        
          <a href="/archives/">
        
          <span class="site-state-item-count">57</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
    
      
      
      <div class="site-state-item site-state-categories">
        
          
            <a href="/categories/">
          
        
        
        
          
        
          
        
          
        
          
        
          
        
        <span class="site-state-item-count">5</span>
        <span class="site-state-item-name">categories</span>
        </a>
      </div>
    
      
      
      <div class="site-state-item site-state-tags">
        
          
            <a href="/tags/">
          
        
        
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
          
        
        <span class="site-state-item-count">39</span>
        <span class="site-state-item-name">tags</span>
        </a>
      </div>
    
  </nav>
  <div class="feed-link motion-element">
    <a href="/rss.xml" rel="alternate">
      <i class="fa fa-rss"></i>RSS
    </a>
  </div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="https://github.com/dctxf" title="GitHub &rarr; https://github.com/dctxf" rel="noopener" target="_blank"><i class="fa fa-fw fa-globe"></i>GitHub</a>
      </span>
    
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="/" title="Weibo &rarr; "><i class="fa fa-fw fa-globe"></i>Weibo</a>
      </span>
    
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="/dctxf" title="Twitter &rarr; dctxf"><i class="fa fa-fw fa-globe"></i>Twitter</a>
      </span>
    
      <span class="links-of-author-item">
      
      
        
      
      
        
      
        <a href="/dctxf" title="FB Page &rarr; dctxf"><i class="fa fa-fw fa-globe"></i>FB Page</a>
      </span>
    
  </div>


  <div class="links-of-blogroll motion-element links-of-blogroll-block">
    <div class="links-of-blogroll-title">
      <i class="fa  fa-fw fa-link"></i>
      Links
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="http://iwuly.com/" title="http://iwuly.com/" rel="noopener" target="_blank">iwuly</a>
        </li>
      
        <li class="links-of-blogroll-item">
          <a href="http://mybulesea.github.io/" title="http://mybulesea.github.io/" rel="noopener" target="_blank">深蓝</a>
        </li>
      
        <li class="links-of-blogroll-item">
          <a href="http://chayangge.com/" title="http://chayangge.com/" rel="noopener" target="_blank">插秧哥</a>
        </li>
      
    </ul>
  </div>

        </div>
      </div>
      <!--noindex-->
        <div class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
            
            
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#HTTP"><span class="nav-number">1.</span> <span class="nav-text">HTTP</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#介绍"><span class="nav-number">1.1.</span> <span class="nav-text">介绍</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#完整-HTTP-请求"><span class="nav-number">1.2.</span> <span class="nav-text">完整 HTTP 请求</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTTP-组成"><span class="nav-number">1.3.</span> <span class="nav-text">HTTP 组成</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#请求状态"><span class="nav-number">1.4.</span> <span class="nav-text">请求状态</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1XX"><span class="nav-number">1.4.1.</span> <span class="nav-text">1XX</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2XX"><span class="nav-number">1.4.2.</span> <span class="nav-text">2XX</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#3XX"><span class="nav-number">1.4.3.</span> <span class="nav-text">3XX</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#4XX"><span class="nav-number">1.4.4.</span> <span class="nav-text">4XX</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#5XX"><span class="nav-number">1.4.5.</span> <span class="nav-text">5XX</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTTP-请求"><span class="nav-number">1.5.</span> <span class="nav-text">HTTP 请求</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#GET-请求"><span class="nav-number">1.5.1.</span> <span class="nav-text">GET 请求</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#POST-请求"><span class="nav-number">1.5.2.</span> <span class="nav-text">POST 请求</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTTP-响应"><span class="nav-number">1.6.</span> <span class="nav-text">HTTP 响应</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#request-对象"><span class="nav-number">2.</span> <span class="nav-text">request 对象</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#兼容写法"><span class="nav-number">2.1.</span> <span class="nav-text">兼容写法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#主要方法"><span class="nav-number">2.2.</span> <span class="nav-text">主要方法</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#open-method-url-async"><span class="nav-number">2.2.1.</span> <span class="nav-text">open(method,url,async)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#send-string"><span class="nav-number">2.2.2.</span> <span class="nav-text">send(string)</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#取得响应"><span class="nav-number">2.3.</span> <span class="nav-text">取得响应</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#responseText"><span class="nav-number">2.3.1.</span> <span class="nav-text">responseText</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#responseXML"><span class="nav-number">2.3.2.</span> <span class="nav-text">responseXML</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#status-和-statusText"><span class="nav-number">2.3.3.</span> <span class="nav-text">status 和 statusText</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#getAllResponseHeader"><span class="nav-number">2.3.4.</span> <span class="nav-text">getAllResponseHeader()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#getResponseHeader"><span class="nav-number">2.3.5.</span> <span class="nav-text">getResponseHeader()</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#readyState"><span class="nav-number">2.3.6.</span> <span class="nav-text">readyState</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JSON"><span class="nav-number">3.</span> <span class="nav-text">JSON</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#介绍-1"><span class="nav-number">3.1.</span> <span class="nav-text">介绍</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#优点"><span class="nav-number">3.2.</span> <span class="nav-text">优点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#书写格式（名称-值对）"><span class="nav-number">3.3.</span> <span class="nav-text">书写格式（名称/值对）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#可用类型"><span class="nav-number">3.4.</span> <span class="nav-text">可用类型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#解析方式"><span class="nav-number">3.5.</span> <span class="nav-text">解析方式</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#eval"><span class="nav-number">3.5.1.</span> <span class="nav-text">eval</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#JSON-parse"><span class="nav-number">3.5.2.</span> <span class="nav-text">JSON.parse</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#拓展阅读"><span class="nav-number">3.5.3.</span> <span class="nav-text">拓展阅读</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#跨域"><span class="nav-number">4.</span> <span class="nav-text">跨域</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#服务器代理"><span class="nav-number">4.1.</span> <span class="nav-text">服务器代理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#JSONP"><span class="nav-number">4.2.</span> <span class="nav-text">JSONP</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#XHR2"><span class="nav-number">4.3.</span> <span class="nav-text">XHR2</span></a></li></ol></li></ol></div>
            

          </div>
        </div>
      <!--/noindex-->
      
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          
            <span id="scrollpercent"><span>0</span>%</span>
          
        </div>
      

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; 2015 – <span itemprop="copyrightYear">2019</span>
  <span class="with-love" id="animate">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">dctxf</span>
</div>
  <div class="powered-by">Powered by <a href="https://hexo.io" class="theme-link" rel="noopener" target="_blank">Hexo</a> v3.9.0</div>

        








        
      </div>
    </footer>

    

  </div>

  
  <script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
  <script src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  <script src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>

<script src="/js/utils.js?v=7.3.0"></script>
  <script src="/js/motion.js?v=7.3.0"></script>


  <script src="/js/affix.js?v=7.3.0"></script>
  <script src="/js/schemes/pisces.js?v=7.3.0"></script>



<script src="/js/next-boot.js?v=7.3.0"></script>




  
  <script>
    (function(){
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      bp.src = (curProtocol === 'https') ? 'https://zz.bdstatic.com/linksubmit/push.js' : 'http://push.zhanzhang.baidu.com/push.js';
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>















  <script src="/js/local-search.js?v=7.3.0"></script>














  

  

  


  
  <script src="/js/scrollspy.js?v=7.3.0"></script>
<script src="/js/post-details.js?v=7.3.0"></script>


    
<script>
  function loadCount() {
    var d = document, s = d.createElement('script');
    s.src = 'https://dctxf.disqus.com/count.js';
    s.id = 'dsq-count-scr';
    (d.head || d.body).appendChild(s);
  }
  // defer loading until the whole page loading is completed
  window.addEventListener('load', loadCount, false);
</script>
<script>
  var disqus_config = function() {
    this.page.url = "https://dctxf.com/Ajax详细学习笔记.html";
    this.page.identifier = "Ajax详细学习笔记.html";
    this.page.title = 'Ajax详细学习笔记';};
  function loadComments() {
    if (window.DISQUS) {
      DISQUS.reset({
        reload: true,
        config: disqus_config
      });
    } else {
      var d = document, s = d.createElement('script');
      s.src = 'https://dctxf.disqus.com/embed.js';
      s.setAttribute('data-timestamp', '' + +new Date());
      (d.head || d.body).appendChild(s);
    }
  }
    $(function() {
      var offsetTop = $('#comments').offset().top - $(window).height();
      if (offsetTop <= 0) {
        // load directly when there's no a scrollbar
        window.addEventListener('load', loadComments, false);
      } else {
        $(window).on('scroll.disqus_scroll', function() {
          // offsetTop may changes because of manually resizing browser window or lazy loading images.
          var offsetTop = $('#comments').offset().top - $(window).height();
          var scrollTop = $(window).scrollTop();

          // pre-load comments a bit? (margin or anything else)
          if (offsetTop - scrollTop < 60) {
            $(window).off('.disqus_scroll');
            loadComments();
          }
        });
      }
    });
  
</script>

</body>
</html>
